<template>
    <div class='i-editor'>
        <Toolbar
            :defaultConfig='toolbarConfig'
            :editor='editorRef'
            :mode="'default'"
            class='i-editor__toolbar'
        />
        <Editor
            v-model='valueHtml'
            :defaultConfig='editorConfig'
            :mode="'default'"
            :style='{height:height}'
            class='i-editor__editor'
            @onChange='handleChange'
            @onCreated='handleCreated'
        />
    </div>

</template>

<script lang='ts' setup>
import { onBeforeUnmount, ref, shallowRef, watch } from 'vue';
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { IMenuConfig } from '@wangeditor/core/dist/core/src/config/interface';
import { IDomEditor, IEditorConfig } from '@wangeditor/editor';

interface Props {
    modelValue?: any;
    height?: string;
}

const props = withDefaults(defineProps<Props>(), {
    height: '300px'
});

const emits = defineEmits(['update:modelValue']);

const editorRef = shallowRef();

const valueHtml = ref('');

const toolbarConfig = {
    excludeKeys: ['fullScreen', 'video', 'insertVideo', 'uploadVideo']
};

// 初始化 MENU_CONF 属性
const editorConfig: Partial<IEditorConfig> = {  // TS 语法
    placeholder: '请输入内容...'
};

type InsertFnType = (url: string, alt: string, href: string) => void

watch(props, (value) => {
    if (value.modelValue) {
        valueHtml.value = value.modelValue;
    }
}, { immediate: true });

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value;
    if (editor == null) return;
    editor.destroy();
});

const handleCreated = (editor: IDomEditor) => {
    editorRef.value = editor; // 记录 editor 实例，重要！

    const config = editor.getConfig() as Partial<IEditorConfig>;
    const MENU_CONF = config.MENU_CONF as IMenuConfig;
    MENU_CONF.uploadImage.customUpload = async (res: any, insertFn: InsertFnType) => {

    };
};

function handleChange(editor: IDomEditor) {
    emits('update:modelValue', editor.getHtml());
}

</script>

<style lang='scss' scoped>
$i-editor-bg-color: var(--el-bg-color-page);
$i-editor-text-color: var(--el-text-color-primary);
$i-editor-textarea-color: var(--el-text-color-regular);
$i-editor-border-color: var(--el-border-color);

.i-editor {
  border: 1px solid $i-editor-border-color;
  border-radius: 6px;
  --w-e-textarea-bg-color: $i-editor-bg-color;
  --w-e-textarea-color: $i-editor-textarea-color;

  :deep(.w-e-toolbar) {
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
  }

  :deep(.i-editor__toolbar) {
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
    background-color: $i-editor-bg-color;
    border-bottom: 1px solid $i-editor-border-color !important;

    :deep(.w-e-bar) {
      background-color: $i-editor-bg-color;
    }


    :deep(button) {
      color: $i-editor-text-color;
    }

    :deep(svg) {
      fill: $i-editor-text-color;
    }

    :deep(.w-e-bar-divider) {
      background-color: $i-editor-border-color;
    }
  }

  .i-editor__editor {
    overflow-y: hidden;
  }
}

</style>
